<html>
<head>
	<meta charset="utf-8" />
	<title>Write</title>
	<link rel="stylesheet" href="redactor/redactor.css" />
	<link rel="stylesheet" href="test-main.css" />
	<script src="lib/jquery-1.8.2.min.js"></script>
</head>
<body>
	<div style="width:1000px; padding: 50px;">
		<div id="categoryBox" style="width:300px; height: 600px; border:1px solid #F00; float:left;">
			<div class="category category-all">all</div>
			<div class="category">11</div>
			<div class="category">22</div>
			<div class="category">33</div>
			<div class="category">44</div>
			<div class="category">55</div>
		</div>
		
		<div id="categoryActiveBox" style="width:500px; height:600px; border:1px solid #0F0; float:right;">
			<div class="category-active category-all">all</div>		
		</div>		
	</div>	
<script src="redactor/redactor.js"></script>
<script type="text/javascript">

function activeCategory(element){
}

function disactiveCategory(element){
}

function categoryActiveClick(){
	if(!$(this).hasClass("category-all")){
		$(this).unbind('click')
		.removeClass("category-active")
		.addClass("category")
		.bind('click', categoryClick)
		.appendTo("#categoryBox");
		
		$(".category-all").fadeIn(1000);
	}

}

function categoryClick(){
	var active = $(".category-active");
	$.each(active, function(){
		if(!$(this).hasClass("category-all")){
			$(this).unbind('click')
				.removeClass("category-active")
				.addClass("category")
				.bind('click', categoryClick)
				.appendTo("#categoryBox");
		}else{
			$(this).hide();
		}
	});
	
	if($(this).hasClass("category-all")){
		console.log("all click");
		$("#categoryActiveBox .category-all").show();
	}else{
		$(this).unbind('click')
		.removeClass("category")
		.addClass("category-active")
		.bind('click', categoryActiveClick)
		.appendTo("#categoryActiveBox");
	}
		
	
}

function categoryAllClick(){
	
}

$(document).ready(function(){

	$(".category-active").bind('click', categoryActiveClick);
	$(".category").bind('click', categoryClick);
	$(".category-all").bind('click', categoryAllClick);
	
});
</script>
</body>
</html>































